import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import Typography from '@/views/components/Typography';
import SubTitle from '@/views/components/SubTitle';
import { Form, Row, Col, Space, Button, Alert, Switch, Popover, Radio, Input } from 'antd';
import React, { useEffect, useState } from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { setAfterSalesScanConfig } from '../../service';
import { useScanRegistrationStore } from '../../store';

const Question = () => {
  return (
    <Popover content={
      <span style={{ display: 'block', width: '186px' }}>
        注意：<br />1、若开启填充数量功能，则扫描完退货物流则自动针对商品数量进行填充。
      </span>
    }>
      <Typography color="#B1B7C3"><QuestionCircleOutlined /></Typography>
    </Popover>
  );
}

/**
 * @description 售后扫描设置
 */
const SettingModal = React.memo((props) => {
	const { updateState, pageConfig } = useScanRegistrationStore()
	const {
    children,
    modalProps,
		...arg
	} = props;
	const [loading, setLoading] = useState(false);
	const [show, toggleShow] = useState(false);
	const [form] = Form.useForm();

  async function handleSubmit () {
    setLoading(true)
    const values = form.getFieldsValue()
    values.enlargeShowTime = Number(values.enlargeShowTime || 0)

    try {
      await setAfterSalesScanConfig(values)
      toggleShow(false);
      updateState({ pageConfig: values })
    } catch (error) {
      console.error(error)
    }
    setLoading(false)
  }
  function FillOpenPacket (props) {
    return (
      <Space><Question /><Switch {...props} /></Space>
    )
  }
  return (
    <div {...arg}>
      <span style={{ cursor: 'pointer' }} onClick={() => toggleShow(true)}>{children}</span>
      <CommonModal
        title={{title: "售后扫描设置"}}
        {...modalProps}
        open={show}
        width={530}
        onOk={handleSubmit}
        onCancel={() => toggleShow(false)}
      >
        <Form
          form={form}
          initialValues={{
            enlargeShowTime: pageConfig.enlargeShowTime || undefined,	//快递单号录入时放大展示	integer(int32)	
            fillOpenPacketNumber: pageConfig.fillOpenPacketNumber,	//填充拆包数量功能:	boolean	
            monitorShoot: pageConfig.monitorShoot
          }}
        >
          <Alert style={{marginBottom: 24}} showIcon message={<Typography as="s1">注：若开启填充数量功能，则扫描完退货物流则自动针对商品数量进行填充</Typography>} />
          <SubTitle symbol as="s2" title="扫描设置" />
          <Form.Item style={{marginBottom: 24}} name="fillOpenPacketNumber" valuePropName="checked" labelCol={12} label="开启默认填充拆包数量功能：">
            <FillOpenPacket />
          </Form.Item>

          <SubTitle symbol as="s2" title="打印退货标签" />
          <div style={{marginTop: 16}}><Typography as="s2">触发条件：确认收货</Typography></div>
          <Alert
            style={{margin: '10px 0'}}
            message={
              <>
                <p><Typography type="error" as="s1">注：若开启填充数量功能，则扫描完退货物流则自动针对商品数量进行填充</Typography></p>
                <p><Typography color="#4E5969" as="s1">销退入库：打印商品的商品编码</Typography></p>
                <p><Typography color="#4E5969" as="s1">退回供应商：打印退货条码</Typography></p>
              </>
            }
          />
          
          <SubTitle symbol as="s2" title="其他设置" />
          
          <Form.Item style={{marginTop: 16, marginBottom: 0}} name="monitorShoot" labelCol={6} label="监控拍摄：">
            <Radio.Group>
              <Radio value={true}>开启</Radio>
              <Radio value={false}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
          <Typography as="s2" color="#999">(启用后，快递单号录入时在界面中放大展示，用于监控拍摄，上限30秒）</Typography>

          <Form.Item style={{marginTop: 16}} name="enlargeShowTime" labelCol={10} label="快递单号录入时放大展示">
            <Input type='number' placeholder='秒数' style={{width: 250}} suffix={'秒'} />
          </Form.Item>

          {/* <SubTitle symbol as="s2" title="拒收件自动创建售后单" /> */}
          {/* <Alert style={{marginTop: 10}} message={<Typography as="s1"><Typography type="error" as="s1">注</Typography>：当扫描快递单号与发货单号一致时，并且没有售后单时，确认收货后则自动进行快递登记并绑定对应发货系统单号生成售后单</Typography>} /> */}
        </Form>
        <CommonLoading loading={loading} />
      </CommonModal>
    </div>
  );
});
export default SettingModal;
